import React from 'react';
import styles from './style';
//引入
import {
  Image,
  Text,
  SafeAreaView,
  View,
  FlatList,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
const hot = require('../../img/hot.png');
const img = require('../../img/img.png');
const img1 = require('../../img/img2.png');
const img2 = require('../../img/img3.png');
const img3 = require('../../img/img4.png');
const im1 = require('../../img/im1.png');
const im2 = require('../../img/im2.png');
const im3 = require('../../img/im3.png');
const im4 = require('../../img/im4.png');
const im5 = require('../../img/im5.png');

export default class Find extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: ['热门', '摄影', '人物', '风景', '动物', '抽象', '节日'],
      isClick: 0,
      List: [],
    };
  }
  viewclick = (i) => {
    this.setState({ isClick: i });
    this[`view${i}`].rubberBand();
    this.getData(this.state.tab[i]);
  };
  handleViewRef(ref, index) {
    this[`view${index}`] = ref;
  }
  componentDidMount() {
    this.getData('热门');
  }
  getData(type) {
    let List = [
      {
        id: '1',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-16898564e0a7dfb0eb1f2072dae62f3f_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613130485&t=9adfc5111d4292e9d98bad6d928eaa0f',
        name: '月亮与六便士',
        tip: type,
        dis: '贫穷的纠缠，病魔折磨着她的意识...',
        downNum: '4210',
        imgArr: [
          {
            id: '1',
            src: img,
          },
          {
            id: '2',
            src: img1,
          },
          {
            id: '3',
            src: img2,
          }
        ],
      },
      {
        id: '2',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-16898564e0a7dfb0eb1f2072dae62f3f_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613130485&t=9adfc5111d4292e9d98bad6d928eaa0f',
        name: '夜晚也很美',
        tip: type,
        dis: '屋内明黄色的灯光让气氛变得温和...',
        downNum: '9011',
        imgArr: [
          {
            id: '1',
            src: im1,
          },
          {
            id: '2',
            src: im2,
          },
          {
            id: '3',
            src: im3,
          }
        ],
      },
      {
        id: '3',
        avatar:
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.zhimg.com%2F50%2Fv2-16898564e0a7dfb0eb1f2072dae62f3f_hd.jpg&refer=http%3A%2F%2Fpic4.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613130485&t=9adfc5111d4292e9d98bad6d928eaa0f',
        name: '月亮与六便士',
        tip: type,
        dis: '贫穷的纠缠，病魔折磨着她的意识...',
        downNum: '4210',
        imgArr: [
          {
            id: '1',
            src: img,
          },
          {
            id: '2',
            src: img1,
          },
          {
            id: '3',
            src: img2,
          }
        ],
      },
    ];
    this.setState({
      List,
    });
  }
  render() {
    let { navigation } = this.props;
    let { tab, isClick, List } = this.state;
    const _imgItem = ({ item }) => {
      return (
        <TouchableOpacity
          onPress={() => navigation.navigate('FindDetail', { img: item.src })}>
          <Animatable.View style={styles.img} animation="fadeInRight">
            <Image source={item.src}></Image>
          </Animatable.View>
        </TouchableOpacity>
      );
    };
    const _renderItem = ({ item }) => {
      return (
        <View style={{ marginTop: 15 }}>
          
            <View style={styles.titleStyle}> 
        <View style={{marginTop: 15}}>
          <TouchableOpacity
            activeOpacity={0.6}
            onPress={() => {
              console.log('跳转他人页面');
            }}>
            <View style={styles.titleStyle}>
              <View style={styles.titleStyleLeftContainer}>
                <Image source={{uri: item.avatar}} style={styles.avatar} />
                <Text style={styles.leftStyle}>{item.name}</Text>
              </View>
              <TouchableOpacity onPress={() => navigation.navigate('SelfWork')}>
                    <View style={styles.rightStyle}>
                <Text style={styles.rightTextStyle}>他的作品</Text>
              </View>
              </TouchableOpacity>
            
            </View>
          </TouchableOpacity>
          <View style={styles.titleStyle}>
            <Text style={[styles.leftStyle, styles.bottomStyle]}>
              {item.dis}
            </Text>
            <View style={[{ width: 50, flexDirection: 'row' }]}>
              <Image source={hot} style={styles.imgStyle}></Image>
              <Text style={styles.rightBottomTextStyle}>{item.downNum}</Text>
            </View>
          </View>
          <ScrollView
            horizontal={true}
            navigation={navigation}
            showsHorizontalScrollIndicator={false}>
            {
              item.imgArr.map((imgItem) => 
                  <TouchableOpacity
                    key={imgItem.id}
                    onPress={() => navigation.navigate('FindDetail', { img: imgItem.src })}>
                    <Animatable.View style={styles.img} animation="fadeInRight">
                      <Image source={imgItem.src}></Image>
                    </Animatable.View>
                  </TouchableOpacity>
              )
            }
          </ScrollView>

          </View>
          </View>

        </View>
      );
    };
    return (
      <View style={styles.container}>
        <View style={{ marginLeft: 15, marginRight: 15 }}>
          <FlatList
            data={List}
            renderItem={_renderItem}
            showsVerticalScrollIndicator={false}></FlatList>
        </View>
      </View>
    );
  }
}
